﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <div class="example-content">
        <BitChoiceGroup Label="Basic Items"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value" />

        <BitChoiceGroup Label="NoCircle"
                        NoCircle
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value" />
    </div>
</DemoExample>

<DemoExample Title="Disabled" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <div>Illustrates how to disable the entire BitChoiceGroup and individual items.</div>
    <br />
    <div class="example-content">
        <BitChoiceGroup Label="Disabled ChoiceGroup"
                        IsEnabled="false"
                        Items="basicItems"
                        DefaultValue="@("A")" />

        <BitChoiceGroup Label="ChoiceGroup with Disabled Item"
                        Items="disabledItems"
                        DefaultValue="@("A")" />
    </div>
</DemoExample>

<DemoExample Title="Images and Icons" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <div>Showcases BitChoiceGroup with image and icon items.</div>
    <br /><br />
    <div class="example-content">
        <BitChoiceGroup Label="Image Items" Items="imageItems" DefaultValue="@("Bar")" />
        <BitChoiceGroup Label="Icon Items" Items="iconItems" DefaultValue="@("Day")" />
    </div>
    <br /><br /><br /><br />
    <div>Inline:</div><br />
    <div class="example-content">
        <BitChoiceGroup Label="Image Items" Items="inlineImageItems" DefaultValue="@("Bar")" Inline />
        <BitChoiceGroup Label="Icon Items" Items="iconItems" DefaultValue="@("Day")" Inline />
    </div>
</DemoExample>

<DemoExample Title="Horizontal" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.</div>
    <br />
    <div class="example-content column">
        <BitChoiceGroup Label="Basic" Items="basicItems" DefaultValue="@("A")" Horizontal />
        <BitChoiceGroup Label="Disabled" Items="basicItems" IsEnabled="false" DefaultValue="@("A")" Horizontal />
        <BitChoiceGroup Label="Image" Items="imageItems" DefaultValue="@("Bar")" Horizontal />
        <BitChoiceGroup Label="Icon" Items="iconItems" DefaultValue="@("Day")" Horizontal />
    </div>
</DemoExample>

<DemoExample Title="Reversed" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>Adjust the label position of BitChoiceGroup's item to be reversed.</div>
    <br />
    <div class="example-content column">
        <BitChoiceGroup Label="Reversed" Items="basicItems" DefaultValue="@("A")" Reversed Horizontal />
    </div>
</DemoExample>

<DemoExample Title="LabelTemplate" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Demonstrates how to customize the label of the BitChoiceGroup using a template.</div>
    <br />
    <div class="example-content">
        <BitChoiceGroup Items="basicItems" DefaultValue="@("A")">
            <LabelTemplate>
                <div class="custom-label">
                    Custom label <BitIcon IconName="@BitIconName.Filter" />
                </div>
            </LabelTemplate>
        </BitChoiceGroup>
    </div>
</DemoExample>

<DemoExample Title="Item templates" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>Illustrates how to customize the appearance of BitChoiceGroup options using item templates.</div>
    <br />
    <div class="example-content">
        <BitChoiceGroup Label="ItemPrefixTemplate" Items="basicItems" DefaultValue="@string.Empty">
            <ItemPrefixTemplate Context="item">
                @(item.Index + 1).&nbsp;
            </ItemPrefixTemplate>
        </BitChoiceGroup>

        <BitChoiceGroup Label="ItemLabelTemplate" Items="itemLabelTemplates" @bind-Value="itemLabelTemplateValue">
            <ItemLabelTemplate Context="item">
                <div class="custom-container @(itemLabelTemplateValue == item.Value ? "selected" : string.Empty)">
                    <BitIcon IconName="@item.IconName" />
                    <span>@item.Text</span>
                </div>
            </ItemLabelTemplate>
        </BitChoiceGroup>
    </div>
    <br /><br /><br />
    <div class="example-content">
        <BitChoiceGroup Label="ItemTemplate" Items="itemTemplateItems" @bind-Value="itemTemplateValue">
            <ItemTemplate Context="item">
                <div class="custom-container @(itemTemplateValue == item.Value ? "selected" : string.Empty)">
                    <div class="custom-circle"></div>
                    <span>@item.Text</span>
                </div>
            </ItemTemplate>
        </BitChoiceGroup>

        <BitChoiceGroup Label="Item's Template"
                        Items="itemTemplateItems2"
                        @bind-Value="itemTemplateValue2" />
    </div>
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>Shows how to use one-way and two-way data binding with BitChoiceGroup.</div>
    <br />
    <div class="example-content">
        <div>
            <BitChoiceGroup Label="One-way" Items="basicItems" Value="@oneWayValue" />
            <br />
            <BitTextField @bind-Value="oneWayValue" />
        </div>

        <div>
            <BitChoiceGroup Label="Two-way" Items="basicItems" @bind-Value="twoWayValue" />
            <br />
            <BitTextField @bind-Value="twoWayValue" />
        </div>
    </div>
</DemoExample>

<DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Shows how to use data annotations for validating the selected value in BitChoiceGroup.</div>
    <br />
    @if (string.IsNullOrEmpty(successMessage))
    {
        <EditForm Model="@validationModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
            <DataAnnotationsValidator />

            <BitChoiceGroup Items="basicItems" @bind-Value="validationModel.Value" />
            <ValidationMessage For="@(() => validationModel.Value)" />

            <br />

            <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
        </EditForm>
    }
    else
    {
        <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
    }
    <br />
    <BitButton Variant="BitVariant.Outline" OnClick="() => { validationModel = new(); successMessage=string.Empty; }">Reset</BitButton>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>Varying sizes for BitChoiceGroup tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
    <br /><br />
    <div>Basic ChoiceGroup</div>
    <div class="example-content column">
        <BitChoiceGroup Size="BitSize.Small"
                        Label="Small"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value" Horizontal />

        <BitChoiceGroup Size="BitSize.Medium"
                        Label="Medium"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value" Horizontal />

        <BitChoiceGroup Size="BitSize.Large"
                        Label="Large"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value" Horizontal />
    </div>
    <br /><br />
    <div>ChoiceGroup with inline icon</div>
    <div class="example-content column">
        <BitChoiceGroup Size="BitSize.Small"
                        Label="Small"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal Inline />

        <BitChoiceGroup Size="BitSize.Medium"
                        Label="Medium"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal Inline />

        <BitChoiceGroup Size="BitSize.Large"
                        Label="Large"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal Inline />
    </div>
    <br /><br />
    <div>ChoiceGroup with icon</div>
    <div class="example-content column">
        <BitChoiceGroup Size="BitSize.Small"
                        Label="Small"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal />

        <BitChoiceGroup Size="BitSize.Medium"
                        Label="Medium"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal />

        <BitChoiceGroup Size="BitSize.Large"
                        Label="Large"
                        Items="iconItems" 
                        DefaultValue="@("Day")"
                        Horizontal />
    </div>
</DemoExample>

<DemoExample Title="Color" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
        <br />
        <div>
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Primary" 
                                Label="Primary" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Secondary" 
                                Label="Secondary" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Tertiary" 
                                Label="Tertiary" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Info" 
                                Label="Info" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Success" 
                                Label="Success" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Warning" 
                                Label="Warning" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.SevereWarning" 
                                Label="SevereWarning" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br />
            <div class="example-box">
                <BitChoiceGroup Color="BitColor.Error" 
                                Label="Error" 
                                Horizontal
                                Items="basicItems"
                                DefaultValue="basicItems[1].Value" />
            </div>
            <br /><br />
            <div style="background:var(--bit-clr-fg-sec);color:var(--bit-clr-bg-sec);padding:1rem">
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.PrimaryBackground" 
                                    Label="PrimaryBackground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.SecondaryBackground" 
                                    Label="SecondaryBackground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.TertiaryBackground" 
                                    Label="TertiaryBackground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
            </div>
            <br />
            <div style="padding:1rem">
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.PrimaryForeground" 
                                    Label="PrimaryForeground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.SecondaryForeground" 
                                    Label="SecondaryForeground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.TertiaryForeground" 
                                    Label="TertiaryForeground" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
            </div>
            <br />
            <div style="padding:1rem">
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.PrimaryBorder" 
                                    Label="PrimaryBorder" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.SecondaryBorder" 
                                    Label="SecondaryBorder" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
                <br />
                <div class="example-box">
                    <BitChoiceGroup Color="BitColor.TertiaryBorder" 
                                    Label="TertiaryBorder" 
                                    Horizontal
                                    Items="basicItems"
                                    DefaultValue="basicItems[1].Value" />
                </div>
            </div>
        </div>
    </DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
    <div>Explores styling and class customization for BitChoiceGroup, including component styles, custom classes, and detailed style items.</div>
    <br /><br />
    <div>Component's Style & Class:</div>
    <br />
    <div class="example-content column">
        <BitChoiceGroup Label="Styled ChoiceGroup"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value"
                        Style="margin-inline: 16px; color:lightseagreen; text-shadow: lightseagreen 0 0 8px;" />

        <BitChoiceGroup Label="Classed ChoiceGroup"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value"
                        Class="custom-class" />
    </div>
    <br /><br /><br /><br />
    <div>Item's Style & Class:</div>
    <br />
    <div class="example-content column">
        <BitChoiceGroup Items="itemStyleClassItems" DefaultValue="itemStyleClassItems[1].Value" />
    </div>
    <br /><br /><br /><br />
    <div><b>Styles</b> & <b>Classes</b>:</div>
    <br />
    <div class="example-content column">
        <BitChoiceGroup Label="Styles"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value"
                        Styles="@(new() { Root = "margin-inline: 16px; --item-background: #d3d3d347; --item-border: 1px solid gray;",
                                          ItemLabel = "width: 100%; cursor: pointer;",
                                          ItemChecked = "--item-background: #87cefa24; --item-border: 1px solid dodgerblue;",
                                          ItemContainer = "padding: 8px; border-radius: 2px; background-color: var(--item-background); border: var(--item-border);" })" />

        <BitChoiceGroup Label="Classes"
                        Items="basicItems"
                        DefaultValue="basicItems[1].Value"
                        Classes="@(new() { Root = "custom-root",
                                           ItemText = "custom-text",
                                           ItemChecked = "custom-checked",
                                           ItemRadioButton = "custom-radio-btn" })" />
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
    <div>Use BitChoiceGroup in right-to-left (RTL).</div>
    <br />
    <div dir="rtl" class="example-content">
        <BitChoiceGroup Label="ساده" Items="rtlItems" DefaultValue="@("A")" Dir="BitDir.Rtl" />
        <BitChoiceGroup Label="غیرفعال" Items="rtlItems" IsEnabled="false" DefaultValue="@("A")" Dir="BitDir.Rtl" />
    </div>
</DemoExample>

@code {
    private List<BitChoiceGroupItem<string>> itemTemplateItems2 = default!;

    protected override void OnInitialized()
    {
        itemTemplateItems2 = new()
        {
            new()
            {
                Text = "Day",
                Value = "Day",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
        <div class="custom-circle" />
        <span style="color:red">@item.Text</span>
    </div>)
            },
            new()
            {
                Text = "Week",
                Value = "Week",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
        <div class="custom-circle" />
        <span style="color:green">@item.Text</span>
    </div>)
            },
            new()
            {
                Text = "Month",
                Value = "Month",
                Template = (item => @<div class="custom-container @(itemTemplateValue2 == item.Value ? "selected" : "")">
        <div class="custom-circle" />
        <span style="color:blue">@item.Text</span>
    </div>)
            }
        };
    }
}